<template>
  <div class="search_box">
    <h1 style="margin-bottom: 15px;">车辆进出场查询</h1>

    <!-- 搜索车牌号 -->
    <el-form :inline="true" :model="searchData" class="demo-form-inline">
      <el-form-item label="车牌号">
        <el-input placeholder="请输入车牌号" v-model="searchData.carnumber" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="searchFn">搜索</el-button>
      </el-form-item>
    </el-form>

    <!-- 查询列表 -->
    <el-table :data="carListData" style="width: 100%" fit>
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column prop="parkid" label="停车场名称" :formatter="parktitleFormatter" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="carnumber" label="车牌号" />
      <el-table-column prop="intime" label="进场时间" />
      <el-table-column prop="outtime" label="出场时间" />
      <el-table-column prop="cashtime" label="支付时间" />
      <el-table-column prop="money" label="支付金额（元）" />
      <el-table-column prop="isvip" label="是否为vip" />

    </el-table>

    <!-- 分页 -->
    <div class="paging">
      <el-pagination v-model:current-page="paging.currentPage" :page-size="10" layout="prev, pager, next" :total="count"
        @current-change="changeCurrent" />
    </div>

  </div>
</template>

<script setup lang="ts">
import { carSearchAPI } from "@/api/charge"
import type { ICarSearch, ICarSearchList } from "@/untils/type"
import { reactive, ref } from "vue"
import { useStore } from 'vuex'

const store = useStore();

let carListData: Array<ICarSearchList> = reactive<Array<ICarSearchList>>([]);
let count = ref<number>(0)
let parkSet = reactive([])
let paging = reactive({
  currentPage: 1,
  pageSize: 10
})
let searchData=reactive({
  carnumber:''
})

store.commit('GET_PARKSET')
parkSet = store.state.parkSet


// 查询列表
function loadCarList(data?: ICarSearch) {
  carSearchAPI({ ...data }).then((res: any) => {
    // console.log(res);
    if (res.code == 2000) {
      carListData.splice(0, carListData.length, ...res.data);
      count.value = res.total;

    }
  })
}
loadCarList()

//根据parkid获取停车场名称
function parktitleFormatter(row: any) {

  let parktitle = ref('')
  parkSet.map((item: any) => {
    if (row.parkid == item.id) {
      parktitle.value = item.title;
    }
  })
  return parktitle.value
}

// 分页
function changeCurrent() {
  loadCarList(paging)
}

//搜索
function searchFn(){
  loadCarList(searchData)
}
</script>

<style lang="less" scoped>
.search_box {
  width: 100%;
  height: 100%;

  .paging {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
  }
}
</style>